import Tabs, { TabsProps } from '@/components/Tabs';
import { deviceV2ControllerGetDeviceOverview } from '@/services/ess/deviceInfo';
import { useModel } from '@@/exports';
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import AllInOneView from './components/AllInOneView';
import BoxView from './components/BoxView';
import Chargingpiles from './components/Chargingpiles';
import InverterView from './components/InverterView';
import PCSView from './components/PCSView';

const EquipmentView: React.FC = () => {
  let realTimeInterval: any = null;
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');
  const [tabs, setTabs] = useState<TabsProps['items'] | any[]>([
    {
      key: '1',
      label: intl.formatMessage({ id: 'equipmentMonitor.batteryBoxOverview' }),
      children: <BoxView />,
      destroyInactiveTabPane: true,
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'equipmentMonitor.allInOneOverview' }),
      children: <AllInOneView />,
      destroyInactiveTabPane: true,
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'equipmentMonitor.pcsOverview' }),
      children: <PCSView />,
      destroyInactiveTabPane: true,
    },
    {
      key: '4',
      label: intl.formatMessage({ id: 'equipmentMonitor.inverterOverview' }),
      children: <InverterView />,
      destroyInactiveTabPane: true,
    },
    {
      key: '5',
      label: intl.formatMessage({ id: 'equipmentMonitor.chargingPileOverview' }),
      children: <Chargingpiles />,
      destroyInactiveTabPane: true,
    },
  ]);
  const getTabs = () => {
    const params = {
      stationId: initialState?.stationId,
      pageConfig: {
        current: '1',
        pageSize: '5',
      },
    };
    deviceV2ControllerGetDeviceOverview(params).then((res) => {
      if (res.data) {
        setTabs([
          res?.data?.batteryBoxBasicConfig?.records?.length ||
          res?.data?.batteryBoxRealTimeOverView.records?.length
            ? {
                key: '1',
                label: intl.formatMessage({ id: 'equipmentMonitor.batteryBoxOverview' }),
                destroyInactiveTabPane: true,
                children: <BoxView boxViewInfo={res?.data?.batteryBoxRealTimeOverView} />,
              }
            : undefined,
          res?.data?.integratedCabinetBasicConfig?.records?.length ||
          res?.data?.integratedCabinetRealTimeOverView?.records?.length
            ? {
                key: '2',
                label: intl.formatMessage({ id: 'equipmentMonitor.allInOneOverview' }),
                destroyInactiveTabPane: true,
                children: <AllInOneView aioBoxInfo={res?.data?.integratedCabinetBasicConfig} />,
              }
            : undefined,
          res?.data?.pcsBasicConfig.records?.length ||
          res?.data?.pcsRealTimeOverView.records?.length
            ? {
                key: '3',
                label: intl.formatMessage({ id: 'equipmentMonitor.pcsOverview' }),
                destroyInactiveTabPane: true,
                children: <PCSView pcsViewInfo={res?.data?.pcsPie} />,
              }
            : undefined,
          res?.data?.inverterBasicConfig.records?.length ||
          res?.data?.inverterRealTimeOverView.records?.length
            ? {
                key: '4',
                label: intl.formatMessage({ id: 'equipmentMonitor.inverterOverview' }),
                destroyInactiveTabPane: true,
                children: <InverterView />,
              }
            : undefined,
          res?.data?.chargeBasicConfig.records?.length ||
          res?.data?.chargeRealTimeOverView.records?.length
            ? {
                key: '5',
                label: intl.formatMessage({ id: 'equipmentMonitor.chargingPileOverview' }),
                destroyInactiveTabPane: true,
                children: <Chargingpiles />,
              }
            : undefined,
        ]);
      }
    });
  };
  useEffect(() => {
    if (realTimeInterval) {
      clearInterval(realTimeInterval);
    }

    getTabs();
    realTimeInterval = setInterval(() => {
      getTabs();
    }, 30000);
    return () => {
      clearInterval(realTimeInterval);
    };
  }, []);
  return (
    <>
      <Tabs key={'key'} items={tabs} hasHeaderBorder={false}></Tabs>
    </>
  );
};

export default EquipmentView;
